<template>
  <view class="page">
    <view class="con-top">
      <view class="top-info">
        <image :src="userDetail.avatar_url" class="header" />
        <view class="info-right">
          <view class="info-title">
            {{ userDetail.username }}
          </view>
          <view class="info-flex" v-if="userInfo.user_join.user_merchant">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-city.svg" />
            {{ userInfo.user_join.user_merchant.merchant||'' }}
          </view>
          <view class="info-flex" v-if="userInfo.user_join">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-45.svg" />
            {{ userInfo.user_join.province||'' }}{{ userInfo.user_join.city||'' }}{{ userInfo.user_join.county||'' }}
          </view>
        </view>
      </view>
      <view class="xinxi-box">
        <view class="xinix-item">
          <view class="xinxi-1">浏览</view>
          <view class="xinxi-1">{{ userDetail.user_dynamic_count.views_number||'0' }}</view>
          <view class="xian"></view>
        </view>
        <view class="xinix-item">
          <view class="xinxi-1">联系</view>
          <view class="xinxi-1">{{ userDetail.user_dynamic_count.get_phone_number||'0' }}</view>
          <view class="xian"></view>
        </view>
        <view class="xinix-item">
          <view class="xinxi-1">分享</view>
          <view class="xinxi-1">{{ userDetail.user_dynamic_count.share_count||'0' }}</view>
          <view class="xian"></view>
        </view>
        <view class="xinix-item">
          <view class="xinxi-1">动态</view>
          <view class="xinxi-1">{{ userDetail.user_dynamic_count.user_dynamic_count||'0' }}</view>
          <view class="xian"></view>
        </view>
        <view class="xinix-item">
          <view class="xinxi-1">留言</view>
          <view class="xinxi-1">{{ userDetail.user_dynamic_count.leave_a_message_count||'0' }}</view>
        </view>
      </view>
    </view>
    <view class="shop-box" v-if="userInfo.user_join.user_merchant">
      <image src="" class="shop-img" />
      <view class="shop-right">
        <view class="shop-title">  {{ userInfo.user_join.user_merchant.merchant||'' }} <view class="jin">进入店铺</view>
        </view>
        <view class="shop-flex">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-44.svg" />
          {{ userInfo.user_join.province||'' }}{{ userInfo.user_join.city||"" }}{{ userInfo.user_join.county||"" }}
        </view>
      </view>
    </view>
    <view class="nav">
      <span></span>动态({{ totalPage }})
    </view>
    <scroll-view scroll-y="true" class="scroll" @scrolltolower="loadMore">
      <view class="wrapper" v-for="(item, index) in listData" :key="index">
        <view class="info">
          <view class="" style="display: flex;align-items: center;" @click="personCenter(item)">
            <image style="border-radius: 50%;" :src="item.user.avatar_url" mode="aspectFill"></image>
            <!-- <image style="border-radius: 50%;" :src="item.wx_user.avatarUrl" mode="aspectFill"></image> -->
            <view class="word">
              <view class="name">{{ item.user.username }} <span v-for="(userItem, index_1) in item.user.user_join.user_identity_id" :key="userItem">{{ userItem
                  }}</span></view>
            </view>
          </view>
        </view>
        <view class="describle">{{ item.content }}</view>
        <view class="imgList">
          <image @click="preview(item.img_arr, index1)" v-for="(item1, index1) in parseImgArr(item.img_arr)" :key="index1" :src="showImg + item1" mode="aspectFill"></image>
        </view>
        <view class="con-bottom">
          {{ item.created_at }}发布
          <view class="more" @click="handleshowPop(index)">
            <image src="https://www.atuanjian.com/appletStatic/static/images/more.png" mode="scaleToFill" />
          </view>
          <view class="pop" v-if="item.isShow">
            <view class="pop-1" @click.stop="collect(item, index)">
              <image :src="getImageSrc(item)" mode="scaleToFill" />
              点赞
            </view>
            <view class="pop-1" style="border: none;" @click="handleComment(index)">
              <image src="https://www.atuanjian.com/appletStatic/static/images/u-43.svg" mode="scaleToFill" />
              评论
            </view>
          </view>
        </view>
        <view class="con-bottom" style="width: 60%;">
          距离您{{item.distance||'0'}}km
          <view class="address">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-address.svg" mode="scaleToFill" />
            {{ item.address || '' }}
          </view>
        </view>
        <view class="tall-list">
          <view class="tall-item"><span>{{ item.user_dynamic_record_count }}</span>人点赞</view>
          <view class="tall-item" v-for="comment in item.user_dynamic_comments" :key="comment.id"><span>{{ comment.user_info.username }}</span>：{{ comment.content }}</view>
        </view>
      </view>
      <view class="nav">
        <span></span>评价({{ totalPageComment }})
      </view>
      <view class="flex-1" @click="showPop=true">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-41.svg" />
        <u-input placeholder="说点什么吧" confirmType="发送" adjustPosition border="32rpx" disabled></u-input>
      </view>
      <view class="tall-list" style="width: 92%;margin: 20rpx auto;">
        <view class="tall-item" v-for="item in commentList" :key="item.id"><span>{{item.user_info.username}}：</span>{{ item.content }}</view>
      </view>
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>
    </scroll-view>
    <view class="kong"></view>
    <view class="bottom-fix">
      <view class="fix-item" @click="handleNav('/pages/home/home')">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-49.jpg" />
        首页
      </view>
      <view class="fix-item">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-47.jpg" />
        分享
        <button type="default" open-type="share"></button>
      </view>
      <view class="fix-item" @click="showPop = true">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-46.jpg" />
        评论
      </view>
      <view class="fix-btn" @click="handlelx">联系</view>
    </view>
    <u-modal :show="show" @confirm="confirm" ref="uModal" :asyncClose="true" confirmText="确认消费" confirmColor="#FFBB50" cancelText="取消" :showCancelButton="true" @cancel="show=false">
      <view class="slot-content">
        <view class="slot-tip">温馨提示</view>
        <view class="slot-con">联系本服务联系人</view>
        <view class="slot-con">您将消耗 <span>{{ check_phone_number_deduction }}</span>积分</view>
        <!-- <view class="slot-flex" @click="type = 1">
          <view class="slot-1">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-48.svg" class="ji"
              style="width: 50rpx;height: 50rpx;margin-left: 20rpx;margin-right: 16rpx;" />
            积分兑换
          </view>
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" class="xuan" v-if="type == 1" />
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" class="xuan" v-else />
        </view> -->
        <!-- <view class="slot-flex" @click="type = 2">
          <view class="slot-1">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-50.svg" class="ji" />
            旺币支付
          </view>
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" class="xuan" v-if="type == 2" />
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" class="xuan" v-else />
        </view> -->
      </view>
    </u-modal>
    <u-popup :show="showPop" :round="12" mode="bottom" @close="close">
      <view class="pop-flex">
        <u-textarea v-model="contents" placeholder="请输入内容"></u-textarea>
        <view class="send" @click="handleSend">发送</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {
  dynamic,
  getDynamicUserInfo,
  userDynamicComments,
  CommentsList,
  userCollect,
  pointsSetting,
  getUserDynamicPhone,
  shareDynamic,
} from "@/utils/request.js";
export default {
  data() {
    return {
      check_phone_number_deduction: 0,
      listData: [],
      imageUrl: this.$config.upLoadApi,
      showImg: "",
      p: 0,
      n: 10,
      show: false,
      showPop: false,
      type: 1,
      id: "",
      userDetail: {},
      userInfo: {},
      totalPage: 0,
      contents: "",
      index: "",
      commentList: [],
      p_comment: 0,
      totalPageComment: 0,
    };
  },
  onLoad(option) {
    this.showImg = this.$config.showImgApi;
    this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
    this.id = option.id;
    this.getInfo();
    this.init();
    this.getpointsSetting();
    this.getTalkList();
  },
  onShareAppMessage() {
    const data = { d_user_id: this.id };
    this.shareDynamic(data).then((res) => {
      console.log(res);
      return {
        //   title: this.details.title,
        //   path: `/pagesA/detail/place?id=${this.detailId}`,
        //   imageUrl: this.banner[0].image,
      };
    });
  },
  methods: {
    async shareDynamic(data) {
      return await shareDynamic(data);
    },
    async userCollect(data) {
      return await userCollect(data);
    },
    async CommentsList(data) {
      return await CommentsList(data);
    },
    async pointsSetting(data) {
      return await pointsSetting(data);
    },
    async getUserDynamicPhone(data) {
      return await getUserDynamicPhone(data);
    },
    getpointsSetting() {
      this.pointsSetting().then((res) => {
        this.check_phone_number_deduction = Math.abs(
          res.check_phone_number_deduction.values
        );
      });
    },
    collect(item, index) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      let data = {
        token: this.userInfo.token,
        user_dynamic_id: item.id,
        collect_status: item.is_concern == 0 ? 1 : 0,
      };
      this.userCollect(data).then((res) => {
        uni.showToast({
          title: "操作成功",
        });
        if (item.is_concern == 0) {
          this.listData[index].is_concern = 1;
          this.listData[index].user_dynamic_record_count += 1;
        } else {
          this.listData[index].is_concern = 0;
          this.listData[index].user_dynamic_record_count -= 1;
        }
      });
    },
    getTalkList() {
      let data = {
        p: this.p_comment,
        n: 10,
        type: 3,
        token: this.userInfo.token,
        award_user_id: this.id,
      };
      this.CommentsList(data).then((res) => {
        if (res.count < 1) {
          this.$data.uEmptyText = "暂无数据";
          return false;
        }
        this.totalPageComment = res.count;
        this.commentList = [...res.list, ...this.commentList];
      });
    },
    handleComment(index) {
      this.index = index;
      this.showPop = true;
    },
    async userDynamicComments(data) {
      return await userDynamicComments(data);
    },
    handleSend() {
      if (!this.userInfo.token) {
        uni.showToast({
          title: "请登录",
          icon: "none",
        });
        return;
      }
      if (!this.contents) {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      }

      let data = {
        token: this.userInfo.token,
        contents: this.contents,
      };

      if (this.index !== "") {
        data.user_dynamic_id = this.listData[this.index].id;
      } else {
        data.award_user_id = this.id;
      }
      this.userDynamicComments(data).then((res) => {
        if (res) {
          uni.showToast({
            title: "已评论",
          });
          setTimeout(() => {
            this.contents = "";
            this.showPop = false;
            this.p = 0;
            this.index = "";
            this.listData = [];
            this.init();
            this.p_comment = 0;
            this.commentList = [];
            this.getTalkList();
          }, 1500);
        }
      });
    },
    parseImgArr(imgArr) {
      try {
        return typeof imgArr === "string"
          ? JSON.parse(imgArr)
          : Array.isArray(imgArr)
          ? imgArr
          : [];
      } catch (e) {
        console.warn("Invalid image array:", e);
        return [];
      }
    },
    getImageSrc(item) {
      return item.is_concern === 0
        ? "https://www.atuanjian.com/appletStatic/static/images/u-dian.svg"
        : "https://www.atuanjian.com/appletStatic/static/images/u-dian1.png";
    },
    loadMore() {
      // if (this.p < this.totalPage - 1) {
      //   this.p++;
      //   this.init();
      // }
      if (this.listData.length < this.totalPage) {
        this.p++;
        this.init();
      }
      if (this.commentList.length < this.totalPageComment) {
        this.p_comment++;
        this.getTalkList();
      }
    },
    getInfo() {
      let params = {
        token: this.userInfo.token,
        d_user_id: this.id,
      };
      this.getDynamicUserInfo(params)
        .then((res) => {
          this.userDetail = {
            ...res,
          };
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getDynamicUserInfo(data) {
      return await getDynamicUserInfo(data);
    },
    close() {
      this.showPop = false;
      // console.log('close');
    },
    handlelx() {
      this.show = !this.show;
    },
    handleNav(url) {
      uni.navigateTo({
        url: url,
      });
    },
    preview(arr, index) {
      let arrs = [];
      arr.forEach((val) => {
        arrs.push(this.showImg + val);
      });
      uni.previewImage({
        urls: arrs,
        current: index,
      });
    },
    async dynamic(data) {
      return await dynamic(data);
    },
    handleshowPop(index) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登录！",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pagesB/login/login",
          });
        }, 1500);
        return;
      }
      this.listData.forEach((item, i) => {
        item.isShow = false;
      });
      this.listData[index].isShow = !this.listData[index].isShow;
    },
    init() {
      let data = {
        // token type 为3 时必须存在
        token: this.userInfo ? this.userInfo.token : "",
        // 	获取类型 1最新 2最热 3关注
        type: 3,
        d_user_id: this.id,
        p: this.p,
        n: this.n,
        d_user_id: this.id,
      };
      this.dynamic(data).then((r1) => {
        let res = r1.data;
        if (res.count < 1) {
          this.$data.uEmptyText = "暂无数据";
          return false;
        }
        // this.totalPage = Math.ceil(res.count / 10);
        this.totalPage = res.count;
        // listData
        if (res.list.length > 0) {
          let listData = [...this.listData, ...res.list];
          listData.forEach((item) => {
            item.isShow = false;
          });
          this.listData = listData;
        } else {
          this.listData = [];
        }
      });
    },
    confirm() {
      let params = {
        token: this.userInfo.token,
        d_user_id: this.id,
      };
      this.getUserDynamicPhone(params).then((res) => {
        if (res) {
          this.show = false;
          uni.makePhoneCall({
            phoneNumber: res.phone,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  background-color: #ffffff;

  .pop-flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    ::v-deep.u-textarea {
      font-size: 23rpx;
      background: #f2f2f2;
      border-radius: 16rpx;
      width: 558rpx;
      margin-left: 16rpx;
    }

    .send {
      width: 125rpx;
      height: 69rpx;
      line-height: 69rpx;
      background: #ffbb50;
      color: #333333;
      font-size: 26rpx;
      border-radius: 32rpx;
      text-align: center;
      margin: 0 16rpx 0 16rpx;
    }
  }

  .slot-content {
    width: 100%;

    .slot-tip {
      font-size: 28rpx;
      text-align: center;
      margin-bottom: 26rpx;
    }

    .slot-con {
      font-size: 26rpx;
      text-align: center;

      span {
        color: #ffbb50;
      }
    }

    .slot-flex {
      margin: 16rpx auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .xuan {
        width: 32rpx;
        height: 32rpx;
      }

      .slot-1 {
        display: flex;
        align-items: center;
        font-size: 26rpx;

        .ji {
          width: 90rpx;
          height: 90rpx;
        }
      }
    }
  }

  .bottom-fix {
    width: 100%;
    height: 108rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #ffffff;
    box-shadow: 0 -1rpx 5rpx rgba($color: #000000, $alpha: 0.4);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;

    .fix-item {
      width: 40rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 20rpx;
      color: #333333;
      position: relative;

      button {
        position: absolute;
        top: 0;
        left: 0;
        width: 88rpx;
        height: 84rpx;
        opacity: 0;
      }

      image {
        width: 36rpx;
        height: 36rpx;
        margin-bottom: 4rpx;
      }
    }

    .fix-btn {
      width: 420rpx;
      height: 70rpx;
      background: #ffbb50;
      border-radius: 62rpx;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 70rpx;
    }
  }

  .flex-1 {
    width: 92%;
    margin: 40rpx auto 0;
    display: flex;
    align-items: center;

    image {
      width: 62rpx;
      height: 62rpx;
    }

    ::v-deep.u-input {
      font-size: 24rpx;
      background: #f2f2f2;
      border-radius: 32rpx;
      padding-left: 26rpx;
      width: 577rpx;
      margin-left: 26rpx;
    }
  }
}

.con-top {
  background: #ffb850;
  padding: 30rpx 0 20rpx;

  .top-info {
    width: 92%;
    margin: 0 auto;
    padding-bottom: 26rpx;
    border-bottom: 1px dashed #ffffff;
    display: flex;

    .header {
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
    }

    .info-right {
      flex: 1;
      margin-left: 26rpx;

      .info-title {
        font-size: 36rpx;
        color: #ffffff;
      }

      .info-flex {
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 22rpx;

        image {
          width: 22rpx;
          height: 22rpx;
          margin-right: 16rpx;
        }
      }
    }
  }

  .xinxi-box {
    width: 92%;
    margin: 0 auto;
    padding-top: 26rpx;
    display: flex;
    align-items: center;

    .xinix-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;

      .xinxi-1 {
        font-size: 22rpx;
        color: #ffffff;
        margin-bottom: 10rpx;
      }

      .xian {
        position: absolute;
        top: 50%;
        margin-top: -18.5rpx;
        right: 0;
        width: 4rpx;
        height: 37rpx;
        background: #ffffff;
      }
    }
  }
}

.shop-box {
  width: 88%;
  margin: 26rpx auto 0;
  background: #ffffff;
  box-shadow: 1rpx 1rpx 5rpx rgba($color: #000000, $alpha: 0.4);
  padding: 20rpx;
  display: flex;

  .shop-img {
    width: 190rpx;
    height: 150rpx;
    border-radius: 8rpx;
    background: #ccc;
  }

  .shop-right {
    flex: 1;
    margin-left: 16rpx;

    .shop-title {
      font-size: 24rpx;
      color: #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .jin {
        font-size: 22rpx;
        color: #aaaaaa;
      }
    }

    .shop-flex {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      font-size: 22rpx;
      color: #333333;

      image {
        width: 22rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.nav {
  width: 92%;
  margin: 32rpx auto 0;
  font-size: 26rpx;
  line-height: 30rpx;
  background: #ffffff;
  display: flex;
  align-items: center;

  span {
    display: inline-block;
    width: 8rpx;
    height: 30rpx;
    background: #ffb850;
    margin-right: 20rpx;
  }
}

.scroll {
  height: 62vh;
  margin-top: 20rpx;

  .tall-list {
    padding: 16rpx;
    background: #cac7c752;
    border-radius: 8rpx;
    margin: 16rpx auto 0;

    .tall-item {
      font-size: 26rpx;
      margin-bottom: 10rpx;

      span {
        color: #f59a23;
      }
    }
  }

  .con-bottom {
    display: flex;
    align-content: center;
    justify-content: space-between;
    font-size: 16rpx;
    color: #333333;
    margin-top: 16rpx;
    position: relative;

    .address {
      display: flex;
      align-items: center;
      font-size: 16rpx;

      image {
        width: 14rpx;
        height: 18rpx;
        margin-right: 8rpx;
      }
    }

    .more {
      width: 53rpx;
      height: 30rpx;
      display: grid;
      place-items: center;
      background: #f2f2f2;

      image {
        width: 18rpx;
        height: 8rpx;
      }
    }

    .pop {
      position: absolute;
      top: -2rpx;
      right: 54rpx;
      width: 341rpx;
      height: 74rpx;
      display: flex;
      align-items: center;
      background: #ffffff;
      box-shadow: 1rpx 1rpx 5rpx rgba($color: #000000, $alpha: 0.4);
      z-index: 9;

      .pop-1 {
        flex: 1;
        border-right: 1rpx solid#AAAAAA;
        height: 35rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 20rpx;
        }
      }
    }
  }

  .wrapper {
    padding: 42rpx 30rpx 30rpx;

    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      position: relative;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .word {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        .name {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #1a1a1a;
          display: flex;
          align-items: center;

          span {
            padding: 4rpx 8rpx;
            margin-left: 10rpx;
            background: #c280ff;
            border-radius: 32rpx;
            font-size: 12rpx;
            color: #b50f9f;
          }
        }

        .time {
          font-size: 22rpx;
          font-family: 苹方-简;
          font-weight: normal;
          line-height: 30rpx;
          color: #999999;
        }
      }

      .guanZhu {
        font-size: 25rpx;
        font-weight: normal;
        line-height: 30rpx;
        color: #999999;
        position: absolute;
        right: 0rpx;
        top: 5rpx;
        display: flex;

        image {
          width: 40rpx;
          height: 40rpx;
          flex-shrink: 0;
          margin-right: 5rpx;
        }

        text {
          margin-top: 9rpx;
        }
      }
    }

    .describle {
      font-size: 28rpx;
      font-family: 苹方-简;
      font-weight: normal;
      line-height: 42rpx;
      color: #1a1a1a;
      margin-bottom: 8rpx;
      word-break: break-all;
    }

    .imgList {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-flow: row wrap;

      image {
        width: 224rpx;
        height: 224rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
      }

      image:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>